<template>
    <!-- 遍历 menuData，为每个菜单项生成对应的 HTML 结构 -->
    <template v-for="(item, index) in props.menuData" :key="`${index}-${item.meta?.id || 'default-id'}`">
      <!-- 如果该项没有 children 或者 children 数组为空，则渲染为一个普通的菜单项 (el-menu-item) -->
      <el-menu-item
        
        @click = "handleChlick(item)"

        v-if="!item.children || item.children.length === 0"
        :index="`${index}-${item.meta?.id || 'default-id'}`"
      >
        <el-icon size="20">
          <component :is="item.meta?.icon || 'DefaultIconComponent'"></component> <!-- 使用默认图标组件 -->
        </el-icon>
        <span>{{ item.meta?.name || '未命名' }}</span> <!-- 如果没有名字，显示默认文本 -->
      </el-menu-item>

      <!-- 如果该项有 children，则渲染为一个带有子菜单的菜单项 (el-sub-menu) -->
        <el-sub-menu 

        v-else :index="`${index}-${item.meta?.id || 'default-id'}`">
        <template #title>
          <el-icon size="20">
            <component :is="item.meta?.icon || 'DefaultIconComponent'"></component> <!-- 使用默认图标组件 -->
          </el-icon>
          <span>{{ item.meta?.name || '未命名' }}</span> <!-- 如果没有名字，显示默认文本 -->
        </template>

        <!-- 递归调用 TreeMenu 组件，传入子菜单的数据 -->
        <tree-menu :menuData="item.children" />
      </el-sub-menu>
    </template>
</template>

<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';


// 定义并解构 props
const props = defineProps({
  menuData: {
    type: Array,
    required: true
  }
});


const store = useStore()

//创建router实例
const router = useRouter()
//点击菜单
const handleChlick = (item,active) => {
  // console.log(item,'item')
  store.commit('addMenu',item.meta)
  router.push(item.meta.path)

}

</script>

<style lang="less">

</style>